<script lang="tsx">
import { ref, defineComponent } from 'vue'
import { cloneDeep } from 'lodash-es'
import { VueDraggable } from 'vue-draggable-plus'
import { allCompnents } from '@/views/Drag/config/index.js'
import { Icon } from '@/components/Icon'
import { ElScrollbar } from 'element-plus'

const compList = ref(cloneDeep(allCompnents))

export default defineComponent({
  setup() {
    const renderDragCompList = () => {
      return compList.value.map((item, index) => {
        return (
          <div class="comp-container" key={index}>
            <div class="type">{item.name}</div>
            <div class="comp-list">
              <VueDraggable
                group={{ name: 'comp', pull: 'clone', put: false }}
                sort={false}
                v-model={compList.value[index].components}
                modelValue={compList.value[index].components}
              >
                {renderDragCompItem(item.components)}
              </VueDraggable>
            </div>
          </div>
        )
      })
    }

    const renderDragCompItem = (comps) => {
      return comps.map((comp) => {
        return (
          <div class="comp-item" key={comp.component}>
            <Icon icon={`svg-icon:${comp.icon}`} class="comp-icon" size={40} />
            <p>{comp.componentName}</p>
          </div>
        )
      })
    }

    return () => (
      <div class="drag-left">
        <ElScrollbar>{renderDragCompList()}</ElScrollbar>
      </div>
    )
  }
})
</script>

<style lang="less" scoped>
.drag-left {
  width: 260px;
  height: 100%;
  overflow: hidden;
  flex-shrink: 0;
  .comp-container {
    .type {
      font-size: 14px;
      font-weight: 600;
      padding: 20px 0 20px 20px;
      user-select: none;
    }
    .comp-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      > div {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        box-sizing: border-box;
        width: 100%;
      }
      .comp-item {
        width: calc(50% - 5px);
        display: flex;
        flex-direction: column;
        align-items: center;
        border: 1.5px dashed transparent;
        border-radius: 4px;
        padding: 10px 0px;
        margin-bottom: 10px;
        cursor: move;
        &:hover {
          border-color: var(--el-color-primary);
        }
        p {
          margin-top: 12px;
          font-size: 14px;
          user-select: none;
        }
        .comp-icon {
          color: #303133;
        }
      }
      .comp-ghost {
        border-color: var(--el-color-primary);
      }
    }
  }
}
</style>
